<template>
    <div class="company-login-container">
       <div class="company-login-box">
           <!--title-->
            <div class="company-login-title">
                <h3>企业方登录</h3>
            </div>
            <!--登录信息的表单-->
           <div class="company-login-form">
               <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
                   <el-input v-model="dataForm.clientOrServer" type="hidden"></el-input>

                   <el-form-item prop="username">
                       <el-input type="text" v-model="dataForm.username" placeholder="请输入手机号/用户名/邮箱"></el-input>
                   </el-form-item>

                   <el-form-item prop="password">
                       <el-input type="password" v-model="dataForm.password" placeholder="请输入密码"></el-input>
                   </el-form-item>

                   <el-form-item prop="captcha">
                       <el-row :gutter="15">
                           <el-col :span="13">
                               <el-input v-model="dataForm.captcha" placeholder="验证码">
                               </el-input>
                           </el-col>
                           <el-col :span="10" class="login-captcha">
                               <img style="width: 100px;height: 38px" :src="captchaPath" @click="getCaptcha()" alt="">
                           </el-col>
                       </el-row>
                   </el-form-item>

                   <el-button type="primary" style="width: 330px" @click="dataFormSubmit()">立即登录</el-button>
               </el-form>
           </div>
           <!--底部的相关信息-->
           <div class="company-login-buttom">
               <span style="color: #C0C4CC">没有账号?</span>
               <router-link to="/companyRegister/register">
                   <span style="color: #409EFF">立即注册</span>
               </router-link>
           </div>
       </div>
    </div>
</template>

<script>
    import {getUUID} from "@/utils";
    import userApi from "@/api/user"

    export default {
        inject:['reload'],
        name: "company-login",
        data(){
            return{
                /*处理登录的参数*/
                dataForm: {
                    username: '',
                    password: '',
                    uuid: '',
                    captcha: '',
                    clientOrServer:'1',         // 1 代表的是客户端登录
                    companyOrPerson:'3'         // 2 客户登录 3企业用户
                },

                user:{},
                //二维码的图片路径
                captchaPath:'',
                //登录校验
                dataRule: {
                    username: [
                        { required: true, message: '帐号不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' }
                    ],
                    captcha: [
                        { required: true, message: '验证码不能为空', trigger: 'blur' }
                    ]
                },
            }
        },
        created() {
            this.getCaptcha()
        },
        mounted() {
        },
        methods:{
            // 获取验证码
            getCaptcha () {
                this.dataForm.uuid = getUUID()
                this.captchaPath = 'http://localhost:8088//renren-fast/captcha.jpg?uuid=' + this.dataForm.uuid;
            },

            //登录功能
            dataFormSubmit(){
                this.$refs['dataForm'].validate((valid) => {
                    if (valid){
                        userApi.login(this.dataForm).then(response => {
                            if (response.status == 200 && response.data.code === 0) {
                                this.$cookie.set('client_token', response.data.token)
                                localStorage.setItem("client_token",response.data.token)
                                this.$router.replace({name:'home'})
                                this.dataForm.username = ''
                                this.dataForm.password = ''
                                this.dataForm.captcha = ''
                                userApi.loginInfo().then(response => {
                                    this.user = response.data.user;
                                    const userInfo = JSON.stringify(this.user)
                                    localStorage.setItem('user',userInfo)
                                    this.$router.replace({name:'home'})
                                    //location.reload()           //重新加载页面 方式一
                                    this.reload()                 //重新加载页面 方式二  最优方法

                                    //加载菜单和权限
                                    userApi.loadingMenuAndPers(this.user.userId)
                                    .then(data => {
                                        sessionStorage.setItem('menuList',JSON.stringify(data.data.menuList))
                                        sessionStorage.setItem('permissions',JSON.stringify(data.data.permissions))

                                        //在权限加载完成以后然后在加载 用户的基本信息
                                        userApi.loadingBaseInfo(this.user.userId)
                                        .then(data => {
                                            if (data.data.code === 0){
                                                localStorage.setItem("userbaseInfo",JSON.stringify(data.data.baseInfo))
                                                this.reload()
                                            }
                                        })
                                        .catch(error => {
                                            Promise.reject(error)
                                        })
                                    })
                                    .catch(error =>{
                                        Promise.reject(error)
                                    })
                                })
                                .catch(error => {
                                    Promise.reject(error)
                                })

                            } else {
                                this.getCaptcha()
                                this.$message.error(response.data.msg)
                                this.dataForm.username = ''
                                this.dataForm.password = ''
                                this.dataForm.captcha = ''
                            }
                        }).catch(error => {

                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>
    /*企业登录*/
    .company-login-container{
        width: 100%;
        height: 550px;
        /*background-color: #bfa;*/
        background-image: url("../../../../src/assets/company.jpg");
        background-repeat: no-repeat;
        background-size:100% 555px;
    }
    /*登录框*/
    .company-login-box{
        float: right;
        width: 330px;
        height: 450px;
        background: #ffffff;
        margin-top: 50px;
        margin-right: 60px;
        padding-left: 20px;
        padding-right: 20px;
    }
    /*登录表单*/
    .company-login-form{
        margin-top: 40px;
    }
    /*底部信息*/
    .company-login-buttom{
        margin-top: 30px;
        font-size: 13px;
        margin-left: 100px;
    }
</style>
